<script setup lang="ts">
import { invoke } from '@tauri-apps/api/core';
import { ref } from 'vue';

const greetMsg = ref('');
const name = ref('');

async function greet() {
  // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
  greetMsg.value = await invoke('greet', {
    name: name.value 
  });
}
</script>

<template>
  <main class="container flex w-full h-full justify-center items-center">
    <div class="w-650px">
      <h1>Welcome to Tauri + Vue</h1>
      <div class="row">
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg"
               class="logo vite"
               alt="Vite logo" />
        </a>
        <a href="https://tauri.app" target="_blank">
          <img src="/tauri.svg"
               class="logo tauri"
               alt="Tauri logo" />
        </a>
        <a href="https://vuejs.org/" target="_blank">
          <img src="./assets/vue.svg"
               class="logo vue"
               alt="Vue logo" />
        </a>
      </div>
      <p class="w-230px">Click on the Tauri, Vite, and Vue logos to learn more.</p>

      <form class="row" @submit.prevent="greet">
        <NInput v-model:value="name"
                placeholder="Enter a name...">
        </NInput>
        <NButton class="c-orange"
                 type="primary"
                 @click="greet">Greet
        </NButton>
      </form>
      <p>{{ greetMsg }}</p>
      <BaseForm></BaseForm>
    </div>
  </main>
</template>

<style lang="scss" scoped>
:root {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #0f0f0f;
  background-color: #f6f6f6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
</style>